import { createGlobalThemeContract } from '@vanilla-extract/css';

export const MEDIA_MAX_WIDTH = '(max-width: 450px)'; // max-device-width
export const MEDIA_DARK = '(prefers-color-scheme: dark)';
export const MEDIA_MOBILE = '(pointer:coarse)';

export const Z_INDEX = {
	MASK: 10000,
	DIALOG: 20000,
	POPUP: 30000,
	DRAG_MASK: 40000,
	TOAST: 100000,
};

export const vars = createGlobalThemeContract(
	{
		color: {
			accent: null,
			success: null,
			danger: null,
			warning: null,
			text: null,
			buttonText: null,
			emphasizeText: null,
			secondaryText: null,
			disabledText: null,
			placeholderText: null,
			border: null,
			windowBackground: null,
			panelBackground: null,
			selection: null,
			selectionBlur: null,
			toastBackground: null,
			shadow: null,
			mask: null,
		},
		empty: {
			color: {
				0: null,
				1: null,
				2: null,
				3: null,
				4: null,
			},
		},
		font: {
			family: null,
			baseSize: null,
		},
		layout: {
			smallRadius: null,
			middleRadius: null,
			largeRadius: null,
			inputHeight: null,
		},
	},
	(_value, path) => `knno-${path.join('-')}`.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`)
);
